<!--  -->
<template>
  <div id="quanbu">
    <div class="datalist" style="margin-top:20px;">
      <div class="datalist-box">
        <i class="el-icon-document"></i>&nbsp;&nbsp;
        <span>数据列表</span>
        <el-button class="addactivity" style="float: right;margin-right:15px;padding:6px 14px">添加</el-button>
        <!-- 遮罩层 -->
        <div>
          <div class="mask" style="display: none;">
            <div class="el-dialog" style="width: 30%; margin-top: 15vh;">
              <div class="el-dialog__header">
                <span class="el-dialog__title">添加退货原因</span>
                <button type="button" aria-label="Close" class="el-dialog__headerbtn">
                  <i class="el-dialog__close el-icon el-icon-close"></i>
                </button>
              </div>
              <div class="el-dialog__body">
                <form data-v-7f1d229e class="el-form">
                  <div data-v-7f1d229e class="el-form-item">
                    <label class="el-form-item__label" style="width: 150px;">原因类型：</label>
                    <div class="el-form-item__content" style="margin-left: 150px;">
                      <div data-v-7f1d229e class="input-width el-input">
                        <!---->
                        <input type="text" autocomplete="off" class="el-input__inner" />
                        <!---->
                        <!---->
                        <!---->
                      </div>
                      <!---->
                    </div>
                  </div>
                  <div data-v-7f1d229e class="el-form-item">
                    <label class="el-form-item__label" style="width: 150px;">排序：</label>
                    <div class="el-form-item__content" style="margin-left: 150px;">
                      <div data-v-7f1d229e class="input-width el-input">
                        <!---->
                        <input type="text" autocomplete="off" class="el-input__inner" />
                        <!---->
                        <!---->
                        <!---->
                      </div>
                      <!---->
                    </div>
                  </div>
                  <div data-v-7f1d229e class="el-form-item">
                    <label class="el-form-item__label" style="width: 150px;">是否启用：</label>
                    <div class="el-form-item__content" style="margin-left: 150px;">
                      <div
                        data-v-7f1d229e
                        role="switch"
                        aria-checked="true"
                        class="el-switch is-checked"
                      >
                        <input
                          type="checkbox"
                          name
                          true-value="1"
                          false-value="0"
                          class="el-switch__input"
                        />
                        <!---->
                        <span class="el-switch__core" style="width: 40px;"></span>
                        <!---->
                      </div>
                      <!---->
                    </div>
                  </div>
                </form>
              </div>
              <div class="el-dialog__footer">
                <span data-v-7f1d229e class="dialog-footer">
                  <button data-v-7f1d229e type="button" class="el-button el-button--default">
                    <!---->
                    <!---->
                    <span>取 消</span>
                  </button>
                  <button data-v-7f1d229e type="button" class="el-button el-button--primary">
                    <!---->
                    <!---->
                    <span>确 定</span>
                  </button>
                </span>
              </div>
            </div>
          </div>
        </div>
        <!-- 结束 -->
      </div>
    </div>
    <!-- 表格 -->
    <div class="datalist-content">
      <table class="tablee" cellspacing="0" cellpadding="0">
        <tr class="hang">
          <td style="width:60px">
            <input type="checkbox" />
          </td>
          <td style="width:80px">编号</td>
          <td style="width:273px">原因类型</td>
          <td style="width:99px">排序</td>
          <td style="width:273px">是否可用</td>
          <td style="width:179px">添加时间</td>
          <td style="width:159px; border-right: 1px solid #ececec;">操作</td>
        </tr>
        <tr class="hang">
          <td style="width:60px">
            <input type="checkbox" />
          </td>
          <td style="width:80px">1</td>
          <td style="width:273px">其他问题</td>
          <td style="width:99px">1</td>
          <td style="width:273px">
            <el-switch v-model="value" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
          </td>
          <td style="width:179px">2019-10-19</td>
          <td style="width:159px; border-right: 1px solid #ececec;">
            <button>编辑</button>
            <button>删除</button>
          </td>
        </tr>
         <tr class="hang">
          <td style="width:60px">
            <input type="checkbox" />
          </td>
          <td style="width:80px">2</td>
          <td style="width:273px">其他问题</td>
          <td style="width:99px">2</td>
          <td style="width:273px">
            <el-switch v-model="value" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
          </td>
          <td style="width:179px">2019-10-19</td>
          <td style="width:159px; border-right: 1px solid #ececec;">
            <button>编辑</button>
            <button>删除</button>
          </td>
        </tr>
         <tr class="hang">
          <td style="width:60px">
            <input type="checkbox" />
          </td>
          <td style="width:80px">3</td>
          <td style="width:273px">其他问题</td>
          <td style="width:99px">3</td>
          <td style="width:273px">
            <el-switch v-model="value" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
          </td>
          <td style="width:179px">2019-10-19</td>
          <td style="width:159px; border-right: 1px solid #ececec;">
            <button>编辑</button>
            <button>删除</button>
          </td>
        </tr>
         <tr class="hang">
          <td style="width:60px">
            <input type="checkbox" />
          </td>
          <td style="width:80px">4</td>
          <td style="width:273px">其他问题</td>
          <td style="width:99px">4</td>
          <td style="width:273px">
            <el-switch v-model="value" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
          </td>
          <td style="width:179px">2019-10-19</td>
          <td style="width:159px; border-right: 1px solid #ececec;">
            <button>编辑</button>
            <button>删除</button>
          </td>
        </tr>
         <tr class="hang">
          <td style="width:60px">
            <input type="checkbox" />
          </td>
          <td style="width:80px">5</td>
          <td style="width:273px">其他问题</td>
          <td style="width:99px">5</td>
          <td style="width:273px">
            <el-switch v-model="value" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
          </td>
          <td style="width:179px">2019-10-19</td>
          <td style="width:159px; border-right: 1px solid #ececec;">
            <button>编辑</button>
            <button>删除</button>
          </td>
        </tr>
      </table>
    </div>
    <!-- 搜索 -->
    <div class="search">
      <div class="search-left">
        <el-select placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
        <button>确定</button>
      </div>
      <div class="search-rigth">
        <el-pagination
          @size-change="handleSizeChange"
          background
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          :page-sizes="[5, 10, 15,]"
          :page-size="5"
          layout="total, sizes, prev, pager, next, jumper"
          :total="10"
          style="float:right;margin-top:8px;"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      value: true,
      options: [
        {
          value: "选项1",
          label: "删除",
        },
      ],
      value1: "",
      currentPage4: "",
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style  scoped>
.app-main {
  min-height: 100%;
}
.miaosha-box {
  padding: 20px;
}
.app-main .miaosha-box .search-Box,
.datalist {
  width: 1127px;
  border: 1px solid #ebeef5;
  background-color: #fff;
  color: #303133;
  border-radius: 4px;
  margin: 0 auto;
}
.app-main .miaosha-box .search-Box .search-box,
.datalist-box {
  padding: 20px;
}
.app-main .miaosha-box .miaosha-input {
  width: 380px;
  height: 32px;
  display: flex;
  align-items: center;
  font-size: 12px;
  margin-top: 30px;
}
.app-main .miaosha-box .miaosha-input span {
  width: 130px;
  margin-left: 60px;
}
.addactivity span {
  width: 82px;
  height: 12px;
  line-height: 12px;
  font-size: 12px;
}
.datalist-content {
  width: 1127px;
  min-height: 48px;
  margin: 20px auto;
}
.hang {
  height: 48px;
}
.tablee > tr > td {
  border: 1px solid #ececec;
  text-align: center;
  line-height: 48px;
  border-right: none;
}
.tablee > tr > td > button {
  border: 0;
  outline: none;
  padding: 5px;
  background: #fff;
  margin-right: 10px;
  font-size: 12px;
  border: 1px solid #ececec;
}
.search {
  width: 1127px;
  margin: 10px auto;
}
.search-left {
  float: left;
}
.search-left > button {
  border: 0;
  outline: none;
  background: #409eff;
  padding: 10px 15px;
  color: #fff;
  margin-left: 20px;
}
</style>